<!--
 * @Descripttion: 单据打印弹窗
 * @version: V1.0
 * @Author: GW
 * @Date: 2021-09-26 14:46:30
 * @LastEditors: GW
 * @LastEditTime: 2021-12-13 14:56:30
-->
<template>
    <a-modal class="print-modal-box" :dialog-style="{ top: '20px' }" :visible="visible" :title="'打印查看'" width="1100px" @ok="handleOk" @cancel="handleCancel">
        <div class="main-warpper" id="printBox">
            <div class="print-content" style="color:#000;font-family: '宋体';">
                <h2 class="print-title-main" style="text-align:center;color:#000;font-size:20px;margin-bottom:0px;">{{userInfo.companyName}}</h2>
                <div class="print-title" style="width: 100%;text-align: center;font-size: 17px;">{{title}}</div>
                <div class="print-header" style="font-size:10px">
                    <a-row :span="24">
                        <a-col 
                            :span="8" v-for="(item,index) in headerData" :key="index"
                            style="font-size:10px">
                            <div v-if="item.code=='voucherState'">
                                {{item.sysName}}：{{item.value==0?'未审核':item.value==1?'已审核':item.value==2?'已确认':item.value==10?'关闭':item.value}}
                            </div>
                            <div v-else>
                                {{item.sysName}}：{{item.value}}
                            </div>
                        </a-col>
                        <!-- <a-col :span="8" v-for="(item,index) in footerData" :key="index">
                            {{item.sysName}}：{{item.value}}
                        </a-col> -->
                    </a-row>
                </div>
                <div class="print-center">
                    <a-table id="print_tb" width="100%" style="font-size:10px" cellspacing="0" cellpadding="0" :columns="columns" :data-source="dataSource" :pagination="false" bordered>
                        <template slot="number" slot-scope="text,record,index">
                            <span v-if="dataSource.length != index+1">{{index+1}}</span>
                            <span v-else>合计</span>
                        </template>
                    </a-table>
                </div>
                <div class="print-footer" style="font-size:10px">
                    <a-row :span="24">
                        <a-col :span="8" v-for="(item,index) in footerData" :key="index">
                            {{item.sysName}}：{{item.value}}
                        </a-col>
                    </a-row>
                </div>

            </div>
        </div>
        <template slot="footer">
            <a-button type="primary" v-print="'#printBox'" @click="handleOk">打印预览</a-button>
            <a-button @click="handleCancel" class="margin-left-10">取消</a-button>
        </template>
    </a-modal>
</template>

<script>
import { IdFieldToNameField } from "@/utils/customize";
import { mapState } from "vuex";
import { getLodop } from "@/utils/tool/LodopFun"
import { Controlwidth } from "@/utils/antTableComponents";
var LODOP;
export default {
    props: {
        incomingPrintData: {
            type: Object,
            default: {},
        }
    },
    
    data () {
        return {
            visible: false,
            title: null,//单据名称
            columns: [],
            dataSource: [],
            headerData: [],//表头数据
            footerData: [],//表尾数据
        }
    },
    updated () {
        Controlwidth("print_tb", 120);
    },
    computed: {
        ...mapState({
            userInfo: state => state.user.info,
        }),
    },
    watch: {

    },
    mounted () {
        
    },
    methods: {
        showModal () {
            this.visible = true;
            setTimeout(() => {
                let data = _.cloneDeep(this.incomingPrintData)
                this.columns = this.regroupTableColumns(data.orderDetailData);
                this.dataSource = data.data.filter(f=>f.id || f.number =='合计');
                this.headerData = data.orderHeaderData.filter(res => { return res.isPrint });
                this.footerData = data.orderFooterData.filter(res => { return res.isPrint });
                this.title = data.title;
            }, 200)
        },
        regroupTableColumns (datas) {
            //组装打印cloums
            let tableColumns = [];
            let data = _.cloneDeep(datas);

            for (let i = 0; i < data.length; i++) {
                if (data[i].columnType == '搜索选择') {
                    data[i].code = IdFieldToNameField(data[i].code)
                }
                let title = data[i].name;
                // if (data[i].onFill) {
                //     title = <div><span style="color:red;font-family: SimSun,sans-serif;font-size:14px">*</span> {data[i].name}</div>
                // }
                let columns = {
                    title: title,
                    key: data[i].code,
                    dataIndex: data[i].code,
                    scopedSlots: { customRender: data[i].code },
                    // width: data[i].columnWidth,
                    fixed: data[i].fixed,
                    align: data[i].align,
                    ellipsis: true,
                }
                if (data[i].isPrint) {
                    tableColumns.push(columns)
                }
            }
            tableColumns.unshift({
                title: '序号',
                dataIndex: 'number',
                key: 'number',
                width: 40,
                align: 'center',
                scopedSlots: { customRender: 'number' },
            })
            return tableColumns;
        },
        handleOk () {
            // this.$print(this.$refs.print);
        },
        handleCancel () {
            this.visible = false;
            setTimeout(() => {
                this.$emit('cancelPrint', this.visible);
            }, 500)
        },
    }
}
</script>

<style lang="less">
    .print-modal-box {
        .ant-table {
            font-size: 14px !important;
        }
        .main-warpper {
            width: 100%;
            height: 700px;
            overflow-y: auto;
            z-index: 999;
            .print-content {
                margin: 0 auto;
                width: 1006px; //36cm
                max-height: 1417.2px; //50cm
                .print-title {
                    padding: 0px 10px;
                    width: 100%;
                    text-align: center;
                }
                .print-header {
                    margin-top: 5px;
                    padding: 0px 10px;
                }
                .print-center {
                    margin-top: 5px;
                    padding: 0px 10px;
                }
                .print-footer {
                    margin-top: 5px;
                    padding: 0px 10px;
                }
            }
        }
    }
    @media print {
        .ant-table-bordered .ant-table-body > table,
        .ant-table-bordered .ant-table-fixed-left table,
        .ant-table-bordered .ant-table-fixed-right table,
        .ant-table-bordered .ant-table-header > table {
            border: 0px;
        }
        .print-title-main{
            font-size:20px;
        }
        .ant-table {
            border: 1px solid #000;
            border-right: 0px;
            border-bottom: 0px;
            font-size: 16px !important;
            font-family: '宋体';
            color: #000;
            border-spacing: 0;
            .ant-table-tbody {
                border: 1px solid #000;
            }
            .ant-table-tbody > tr > td,
            .ant-table-thead > tr > th {
                height: 24px;
                border-bottom: 1px solid #000;
                border-right: 1px solid #000;
                color: #000;
                font-size: 12px;
            }
            .ant-table-wrapper thead tr,
            .ant-table-wrapper tbody tr {
                height: 24;
                line-height: 24px;
            }
        }
        .print-center {
            margin-top: 10px;
            font-size:10px;
        }
        .print-footer {
            margin-top: 10px;
            font-size:14px;
        }
    }
</style>